<template>
  <div id="list_app">
    <div class="trend">
      <div class="item" v-for="(item, index) in trend">
        <router-link :to="vLinks_h(index)" class="head">
          <img :src="item.icon" class="icon" /> {{ item.title}}
        </router-link>
        <div class="content">
          <div v-for="(subitem,i) in item.data" class="subitem">
            <router-link :to="vLinks_c(index,i)">
              {{ subitem.title }}
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
// import header from './header/header.vue';
const _dataTrend = window._dataTrend
export default {
  data() {
    return {
      trend: _dataTrend || []
    }
  },
  methods: {
    vLinks_c(type, id) {
      return {
        name: "Trends",
        query: {
          type,
          id
        }
      }
    },
    vLinks_h(type) {
      return {
        name: "Trends",
        query: {
          type,
        }
      }
    }
  },
  created(){
    bus.$emit('changeHeaderLogo', "logo_trend_0")
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/mixin.styl"
  body
    background: $color-background
    .trend
      position: relative
      .item
        background: $color-background-w
        margin-bottom: 15px
        padding: 0 10px
        .head
          height: 42px
          padding-top: 12px
          color: $color-text
          font-size: $font-size
          line-height: 30px
          display: block
          font-weight: bold
          .icon
            width: 30px
            height: 28px
            display: inline-block
            margin-right: 3px
        .content
          position: relative
          width: 100%
          padding: 12px 0
          .subitem
            display: inline-block
            width: 25%
            color: $color-text-s
            font-size: $font-size-s
            text-align: center
            height: 32px
            line-height:32px
            &:visited, &:hover
              color: $color-text-s
            @media screen and (min-width: 410px)
              width: 20%
            &:nth-child(1)
              text-align: left
            &:nth-child(5n)
              text-align: left
              @media screen and (min-width: 410px)
                text-align: right
            &:nth-child(4n)
              text-align: right
              @media screen and (min-width: 410px)
                text-align: center
.header
  .logo_trend_0{
      background-image:url("./i/1@3x.png")
      width 164px
      height 26px
  }

</style>